<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>海报预览</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
</head>
<body class="docs-home" ontouchstart="">

<style type="text/css">
	@media (min-width: 850px){
		.docs-home .phone{
		  	/*margin: 0px 0px;*/
		  	margin: 10px auto !important;
		  }

		  .phone:before {
		    content: '';
		    width: 60px;
		    height: 10px;
		    border-radius: 10px;
		    position: absolute;
		     left:50%;
		    margin-left: -30px;
		    background:#333;
		    top: 50px;
		}

		  .phone .statusbar {
		    position: absolute;
		    width: 320px;
		    height: 20px;
		   	background:url('');
		    left: 50%;
		    margin-left: -160px;
		    top: 100px;
		    -webkit-background-size: 100% auto;
		    background-size: 100% auto;
		}

		  .phone:after {
		    content: '';
		    position: absolute;
		    width: 60px;
		    height: 60px;
		    left: 50%;
		    margin-left: -30px;
		    bottom: 20px;
		    border-radius: 100%;
		    box-sizing: border-box;
		    border: 5px solid #333;
		}
	}
	.phone{
		background: #111;
		border-radius: 0px;
		box-shadow: none;
		width: 100%;
		height: 568px;
		padding: 0;
	}
	.docs-home.mui-ios .phone .statusbar,.docs-home.mui-android .phone .statusbar,.docs-home.mui-ios .phone:before,.docs-home.mui-ios .phone:after{
		display: none;
	}
	.phone {
		margin: 0 auto;
		position: relative;
	    background: #111;
	    border-radius: 55px;
	    box-shadow: 0px 0px 0px 2px #aaa;
	    width: 320px;
	    height: 568px;
	    padding: 105px 25px;
	    -webkit-box-sizing: content-box;
	    box-sizing: content-box;
	}
	.phone iframe {
	    width: 320px;
	    height: 100%;
	    display: block;
	    width: 100%;
	    margin-top: 20px;
	}
</style>

<div class="docs-header">
    <div style="max-width:1024px;margin:0 auto;">
        <div class="phone">
            <iframe th:src="${'http://kkcstatic.youzhi.net/lesson/#/inline-detail?lessonId=' + lessonId}" frameborder="0" scrolling="yes"></iframe>
            <div class="statusbar"></div>
        </div>
    </div>
</div>
</body>
</html>